<!doctype html>
<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link href="//fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
  <script src="treevis.js"></script>
  <link href="treevis.css" rel="stylesheet">
</head>
<body>

<div class="treevis">
  <div class="treevis-root framelayout" style="width: 360px; height: 640px; background-color: #e5e5e5">

    <div class="textview" style="box-sizing: border-box; padding-left: 16px; padding-top: 16px; position: absolute; top: 56px; left: 0; right: 0; bottom: 0;">
      Hi there!
    </div>

    <div class="appbar" style="width: 100%; height: 56px; background-color: #3f51b5; fill: white; color: #fff" data-elevation="4">

      <svg style="position: absolute; height: 24px; top: 16px; left: 16px;" width="24" height="24" viewBox="0 0 24 24">
        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
      </svg>

      <span class="title" style="position: absolute; left: 72px; line-height: 56px; font-size: 20px; font-weight: 500;">Screen Title</span>

    </div>

    <div class="fab" data-elevation="4" style="right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; background-color: #ff4081; fill: white;">

      <svg style="position: absolute; width: 24px; height: 24px; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px;" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
      </svg>

    </div>

  </div>
</div>

<div class="xmltree">
FrameLayout                                            %.treevis-root
  LinearLayout orientation=vertical                    %.treevis-root
    Toolbar layout_height=?actionBarSize               %.appbar
    TextView layout_weight=1                           %.textview
  FloatingActionButton layout_gravity=bottom|right     %.fab
</div>

<style>

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: row;
}

.treevis {
  flex: 1 0 0;
  background: #f7f7f7;
  font-family: Roboto;
}

.xmltree {
  background: #fff;
  flex: 1 0 0;
}

</style>

</body>
</html>
